<template>
  <div class="container-home" >
    <!-- 轮播图 -->
    <el-carousel :interval="carousel.duration*1000" type="card" height="200px">
      <el-carousel-item v-for="item,index in carousel.list" :key="index">
        <x-img :src="item.img" @click="goLink(item)"></x-img>
      </el-carousel-item>
    </el-carousel>
    <!-- 歌单 -->
    <div class="container-sing">
      <h1 style="text-align: center">歌单</h1>
      <panel-list :list="dataList" :type="1"></panel-list>
    </div>
  </div>
</template>

<script>
import * as axiosApi from './api'
import { onMounted, reactive, toRefs } from 'vue'
export default {
  setup(){
    const _data=reactive({
      dataList:[],
      carousel:{}
    })
    onMounted(()=>{
      axiosApi.getSonglists({paging:true}).then(res=>{
        _data.dataList=res.data.content.map(item=>{
          return {
            id:item.songlistNo,
            url:item.songListImg,
            description:item.description
          }
        })
      })
      //查询轮播图
      getCarousel()
    })
    function getCarousel(){
      axiosApi.getCarousels().then(res=>{
        res.data={
          ...res.data,
          list:res.data.list.sort((a,b)=>a.sort-b.sort)
        }
      _data.carousel = res.data
      })
    }
    function goLink(item){
      if(item.toPath) location.href=item.toPath
    }
    return {
      ...toRefs(_data),
      goLink
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.container-home {
  .container-sing {
  }
}
</style>
